import styled from '@emotion/styled';
import React, { useEffect } from 'react';
import { useBusiness } from '../Context/BusinessContext';
import { IBusinessName, IBusinessStatus } from '@/views/Context/BusinessContext';
import { useTranslation } from 'react-i18next';

const Container = styled.div`
	width: 100%;
	height: 100%;
	z-index: 9999;
	top: 0;
	position: absolute;
	display: ${(props: { whiteBoardBtnStatus: string }) => (props.whiteBoardBtnStatus === 'stow' ? 'block' : 'none')};
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	user-select: none;
`;

const IframeContent = styled.div`
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 660px;
	max-height: calc(100vh - 50px);
	background: #fdfeff;
	box-shadow: 0px 2px 20px 0px rgb(0 0 0 / 19%);
	border-radius: 4px;
	z-index: 100;
	iframe {
		border: none;
	}
`;

const FooterBox = styled.div`
	position: absolute;
	bottom: 16px;
	right: 24px;
	display: flex;
`;

const MinimizeBtn = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
	width: 101px;
	height: 36px;
	background: #ffffff;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
	border-radius: 21px;
	cursor: pointer;
`;

const MinimizeText = styled.span`
	font-size: 14px;
	color: #2d2d2d;
`;

const EndBtn = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
	width: 101px;
	height: 36px;
	background: #ffffff;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
	border-radius: 21px;
	margin-left: 18px;
	cursor: pointer;
`;

const EndText = styled.span`
	color: #de0112;
	font-size: 14px;
`;

const IconSvg = styled.span`
	display: flex;
	padding: 0 4px;
	vertical-align: middle;
`;

const index = () => {
	const { t } = useTranslation();
	const { whiteBoardBtnStatus, setWhiteBoardBtnStatus, BusinessTaskMap, cancelBusiness } = useBusiness();
	const endWhiteBoard = async () => {
		const data = BusinessTaskMap.findTaskWithTaskName(IBusinessName.SHARED_WHITEDOARD);
		data.forEach(item => {
			if (item.status === IBusinessStatus.IN_PROGRESS) {
				cancelBusiness(item.clientId, IBusinessName.SHARED_WHITEDOARD);
			}
		});
	};
	const minWhiteBoard = () => {
		setWhiteBoardBtnStatus('open');
	};
	return (
		<Container id="whiteBoard-iframe-container" whiteBoardBtnStatus={whiteBoardBtnStatus()}>
			<IframeContent id="whiteBoard-iframe">
				<FooterBox>
					<MinimizeBtn onClick={minWhiteBoard}>
						<IconSvg className="widget-icon" aria-hidden="true">
							<svg style={{ width: '14px', height: '14px' }}>
								<use xlinkHref={'#icon-widget-zuixiaohua'}></use>
							</svg>
						</IconSvg>
						<MinimizeText>{t('minimize')}</MinimizeText>
					</MinimizeBtn>
					<EndBtn onClick={endWhiteBoard}>
						<IconSvg className="widget-icon" aria-hidden="true">
							<svg style={{ width: '14px', height: '14px' }}>
								<use xlinkHref={'#icon-widget-jieshubaiban'}></use>
							</svg>
						</IconSvg>
						<EndText>{t('end-whiteboard')}</EndText>
					</EndBtn>
				</FooterBox>
			</IframeContent>
		</Container>
	);
};

export default index;
